<template>
    <div class="market-fluctuation">
    	<div class="common-wrap">
            <div class="common-wrap-head">市值风控评分</div>
            <div class="common-wrap-body" style="padding-top:25px;">
                <div class="score-level-wrap">
                    <div class="score-cell">
                        <div class="score-icon">
                            <img src="../../assets/this_company.png"/>
                        </div>
                        <div class="score-content">
                            <p class="score-number">{{ indexScore[0] }}</p>
                            <p class="score-item">本公司</p>
                        </div>
                    </div>
                    <div class="score-cell">
                        <div class="score-icon">
                            <img src="../../assets/this_industry.png"/>
                        </div>
                        <div class="score-content">
                            <p class="score-number">{{ indexScore[1] }}</p>
                            <p class="score-item">行业均值</p>
                        </div>
                    </div>
                    <div class="score-cell">
                        <div class="score-icon">
                            <img src="../../assets/a_average.png"/>
                        </div>
                        <div class="score-content">
                            <p class="score-number">{{ indexScore[2] }}</p>
                            <p class="score-item">A股均值</p>
                        </div>
                    </div>
                </div>

                <div class="index-chart">
                    <canvas id="riskChart"></canvas>
                </div>
            </div>
        </div>

        <div class="common-wrap">
            <div class="common-wrap-head self-wrap-head">
                <span>市值风险评估</span>
                <div class="self-tab">
                    <div class="self-tab-cell" :class="{'active-tab-cell':riskTab===0}" @click="riskTab = 0" v-if="riskData.capital_transaction_flag">市场异动提示</div>
                    <div class="self-tab-cell" :class="{'active-tab-cell':riskTab===1}" @click="riskTab = 1" v-if="riskData.placards_tips_flag">举牌风险提示</div>
                </div>
            </div>
            <div class="common-wrap-body">
                <div class="vio-rate-box">
                    <div class="vio-rate-wrap" :class="{'vio-rate-view-right': riskTab===1 }">
                        <div class="vio-rate-cell" >
                            <div class="risk-item-list">
                                <div class="risk-item" v-for="(item,index) in riskData.capital_transaction" @click="initCapitalItem = index" :class="{'act-item':initCapitalItem===index }">{{ item.index_type }}</div>
                            </div>
                            <div class="table-wrap" v-if="riskTab===0">
                                <table class="risk-item-table" cellpadding="0" cellspacing="0" v-if="riskData.capital_transaction.length">
                                    <thead>
                                        <th>指标名称</th>
                                        <th>指标值</th>
                                        <th>较上日</th>
                                    </thead>
                                    <tbody>
                                        <tr v-for="vItem in riskData.capital_transaction[initCapitalItem].value_list">
                                            <td>{{vItem.index_name}}</td>
                                            <td width="90">{{vItem.index_value}}</td>
                                            <td width="40" class="arrow-wrap">
                                                <img src="../../assets/up@2x.png" v-if="vItem.index_flag == 'up'" />
                                                <img src="../../assets/down@2x.png" v-else-if="vItem.index_flag == 'down'" />
                                                <span v-else> --</span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>

                                
                            </div>
                            <p class="risk-update-time">数据时间：{{riskUpdateTime}}</p>
                        </div>
                        <div class="vio-rate-cell" >
                            <div class="risk-item-list">
                                <div class="risk-item" :class="{'act-item': initPlacardsItem === 'baoxiangongsi'}" @click="initPlacardsItem = 'baoxiangongsi'">保险公司</div>
                                <div class="risk-item" :class="{'act-item': initPlacardsItem === 'chanyeziben'}" @click="initPlacardsItem = 'chanyeziben'">产业资本</div>
                                <div class="risk-item" :class="{'act-item': initPlacardsItem=== 'simujijin'}" @click="initPlacardsItem = 'simujijin'">私募基金</div>
                            </div>
                            <div class="table-wrap" v-if="riskTab===1">
                                <table class="risk-item-table" v-if="riskData.capital_transaction.length" cellpadding="0" cellspacing="0">
                                    <thead>
                                        <th>指标名称</th>
                                        <th>范围</th>
                                        <th>指标值</th>
                                        <th>风险</th>
                                    </thead>
                                    <tbody>
                                        <tr v-for="vItem in riskData.placards_tips[initPlacardsItem].value_list">
                                            <td>{{vItem.index_name}}</td>
                                            <td width="60">{{vItem.index_range}}</td>
                                            <td width="60">{{vItem.index_value}}</td>
                                            <td width="40" class="arrow-wrap">
                                                <img src="../../assets/up@2x.png" v-if="vItem.index_flag == 'up'" />
                                                <img src="../../assets/down@2x.png" v-else-if="vItem.index_flag == 'down'" />
                                                <span v-else> --</span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>

                                
                            </div>
                            <p class="risk-update-time">数据时间：{{riskUpdateTime}}</p>
                        </div>
                    </div>
                </div>
                <!-- <div class="index-risk-cell" v-if="riskTab === 0">
                    
                </div>

                <div class="index-risk-cell" v-if="riskTab === 1">
                    
                </div> -->
            </div>
        </div>


    </div>
</template>

<script>
import Vue from 'vue';
import { getIndexInfo, getPunishNews, getMarketScore } from '@/api/data';
import { Icon } from 'vant';

Vue.use(Icon);
export default {
    name: 'MarketFluctuation',
    data() { 
        return {
        	indexScore:[0,0,0],
            punishNewsList:[],
            riskTab: 0,
            riskData:{
                capital_transaction_flag:false,
                capital_transaction:[],
                placards_tips_flag:false,
                placards_tips:{}
            },
            initCapitalItem:0,
            initPlacardsItem: 'baoxiangongsi',
            riskUpdateTime:''
        };
    },
    mounted() {
    	this.getIndexChart();
    	this.getIndexInfoData();
    },
    methods:{
    	getIndexChart() {

            let keyArr = ['company','industry','all'];
            getMarketScore().then(res => {
                let oriData = res.data;
                let data = [];
                
                for(var _key in oriData){
                    if(_key !== 'time'){
                        let _type = _key === 'company' ? '本公司' : _key === 'industry' ? '行业均值' : 'A股公司均值';

                        this.indexScore[keyArr.indexOf(_key)] = oriData[_key][oriData[_key].length-1];
                        this.$forceUpdate();
                        console.log(this.indexScore);
                        oriData[_key].forEach((obj,ind) => {
                            let cellData = {
                                y: obj,
                                name: _type,
                                x: oriData.time[ind]
                            }
                            data.push(cellData);
                        });
                    }
                }

                let minNum = 0;
                data.forEach((obj,ind) =>{
                    if(ind === 0){
                        minNum = obj.y;
                    } else {
                        minNum = obj.y < minNum ? obj.y : minNum;
                    }
                });

                var chart = new this.$F2.Chart({
                    id: 'riskChart',
                    pixelRatio: window.devicePixelRatio,
                    padding:[ 20, 20, 25, 22 ]
                });
                
                chart.source(data);
                chart.legend(false);
                chart.tooltip({
                    showTitle: false,
                    layout: 'vertical',
                    offsetY: 48, // y 方向的偏移
                    showCrosshairs: true
                });
                chart.scale({
                    x: {
                        range: [0, 1]
                    },
                    y: {
                        min: minNum
                    }
                });
                chart.axis('y', {
                    grid: {
                        lineDash: null,
                        stroke: '#e8e8e8',
                        lineWidth: 1
                    }
                });
                chart.axis('x',{
                    grid: {
                        lineDash: null,
                        stroke: '#e8e8e8',
                        lineWidth: 1
                    }
                });
                chart.area().position('x*y').color('name*y', (item, y) => { //多个参数，通过回调函数
                    if (item === '本公司') {
                      return 'l(90) 0:#577DF5 1:#f7f7f7';
                    }
                    return 'rgba(0,0,0,0)';
                });
                chart.line().position('x*y').color('name',['#577DF5','#9B68F9','#F2C368']);;
                console.log(data);
                chart.render();
            }).catch((err) => {
                console.log(err);
            });

            // getMarketOption({
            //     fm:'app'
            // }).then((res) => {
            //     this.indexScore = res.data.index; 
            // }).catch((err) => {
            //     console.log(err);
            // });
        },
        getIndexInfoData() {
        	getIndexInfo({
        	}).then((res) => {
                this.riskData = res.data;
                this.riskUpdateTime = res.data.time;
        		// console.log(res);
        	}).catch((err) => {
        		console.log(err);
        	});
        }
    }
};
</script>

<style>
	#riskChart{
	    width: 100%;
	    height:260px;
	}
    .risk-item-list{
        display: flex;
        flex-wrap:wrap;
    }
    .risk-item-list .risk-item{
        background-color: #F4ECDF;
        color:#C3A26D;
        padding:0 10px;
        height: 26px;
        line-height: 26px;
        border-radius: 12px;
        margin-right: 20px;
        font-size:12px;
        margin-bottom: 10px;
    }
    .risk-item-list .risk-item.act-item{
        background-color: #D4B686;
        color:#FFFFFF;
    }

    .table-wrap{
        border-radius: 9px;
        overflow: hidden;
        border:1px solid #E4DCDB;
    }
    .risk-item-table{
        
        width:100%;
        box-sizing: border-box;
        border-collapse:collapse;
    }
    .risk-item-table thead{
        background-color: #F6F0E5;
        height: 37px;
        color: #757679;
        font-weight: normal;
        font-size:13px;
        line-height: 37px;
    }
    .risk-item-table thead th{
        padding:0 10px;
        text-align: center;
    }
    .risk-item-table tr{
        line-height: 34px;
        border-bottom: 1px solid #EAEAEA;
        font-size: 13px;
    }
    .risk-item-table tr:last-child{
        border-bottom: none;
    }
    .risk-item-table tr td{
        text-align: center;
        color:#222;
        padding:5px 10px;
        line-height: 1.7em;
    }
    .arrow-wrap{
        vertical-align: middle;
    }
    .arrow-wrap img{
        width: 10px;
        height: 15px;
        vertical-align: middle;
    }
    .risk-update-time{
        color:#BCBCBC;
        font-size: 14px;
        text-align: left;
        margin-top:13px;
    }
</style>